<template>
  <div v-if="tools && tools.length > 0" class="related-tools">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-2">
      <Icon name="heroicons:rectangle-group" class="w-6 h-6 text-blue-600" />
      相关工具推荐
    </h2>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <NuxtLink
        v-for="tool in tools"
        :key="tool.id"
        :to="`/tools/${tool.slug}`"
        class="group block p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-blue-500 dark:hover:border-blue-400 transition-all hover:shadow-md"
      >
        <!-- Logo -->
        <div class="flex items-start gap-3 mb-3">
          <img
            v-if="tool.logo"
            :src="tool.logo"
            :alt="tool.name"
            class="w-12 h-12 rounded-lg object-cover flex-shrink-0"
          />
          <div
            v-else
            class="w-12 h-12 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white text-lg font-bold flex-shrink-0"
          >
            {{ tool.name.charAt(0) }}
          </div>
          
          <div class="flex-1 min-w-0">
            <h3 class="font-semibold text-gray-900 dark:text-white truncate group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
              {{ tool.name }}
            </h3>
            <div class="flex items-center gap-2 mt-1">
              <div class="flex items-center text-xs text-yellow-600 dark:text-yellow-400">
                <Icon name="heroicons:star-solid" class="w-3 h-3 mr-0.5" />
                {{ tool.rating }}
              </div>
              <span class="text-xs text-gray-400">•</span>
              <span class="text-xs text-gray-500 dark:text-gray-400">
                {{ formatViews(tool.views) }} 浏览
              </span>
            </div>
          </div>
        </div>
        
        <!-- 描述 -->
        <p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 mb-3">
          {{ tool.description }}
        </p>
        
        <!-- 标签 -->
        <div class="flex flex-wrap gap-1.5">
          <span
            v-if="tool.isFree"
            class="px-2 py-0.5 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 text-xs rounded-full"
          >
            免费
          </span>
          <span
            v-if="tool.isPremium"
            class="px-2 py-0.5 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 text-xs rounded-full"
          >
            会员专属
          </span>
          <span
            v-if="tool.category"
            class="px-2 py-0.5 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 text-xs rounded-full"
          >
            {{ tool.category.name }}
          </span>
        </div>
      </NuxtLink>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Tool } from '~/types'

interface Props {
  tools: Tool[]
}

defineProps<Props>()

const formatViews = (views: number | string): string => {
  const n = typeof views === 'string' ? parseInt(views) : views
  if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M'
  if (n >= 1000) return (n / 1000).toFixed(1) + 'K'
  return n.toString()
}
</script>

<style scoped>
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>

